<template>
	<view class="life">
		<view class="icon">
			<u-icon name="list" size="30px" @click="clickhistory"></u-icon>
		</view>
		<view class="l1">
			<u-radio-group v-model="key">
				<u-radio v-for="(item,index) in list1" :key="index" :label="item.name" :name="item.name" style="margin-right: 20px; margin-top: 40px;"></u-radio>
			</u-radio-group>
		</view>
		<view class="l2">
			<text>手机号：</text>
			<input type="text" placeholder="请输入手机号" v-model="phonenumber"/>
		</view>
		<u-button type="primary" text="查询" style="margin-bottom: 10px;" @click="clickpay(phonenumber)"></u-button>
		<view class="l3">
			<text style="font-size: 30px;">常用手机号列表：</text>
		</view>
		<view class="l4">
			<text>运营商名称：</text>
			<text>{{key1}}</text>
		</view>
		<view class="l5">
			<text>手机号：</text>
			<text>{{phonenumber1}}</text>
		</view>
		<view class="l6">
			<text>添加时间：</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[
					{
						name:'中国移动',
						disabled:false
					},
					{
						name:'中国联通'
					},
					{
						name:'中国电信'
					}
				],
				key:'',
				phonenumber:'',
				key1:'',
				phonenumber1:''
			}
		},
		methods: {
			//点击跳转交费页面
			clickpay(number){
				if(this.phonenumber===''||this.key===''){
					uni.showToast({
						title:'参数错误',
						icon:'error'
					})
				}else{
					this.key1=this.key
					this.phonenumber1=this.phonenumber
					uni.navigateTo({
						url:'/pages/other/life/pay/pay?number='+number
					})
				}	
			},
			// 点击跳转缴费历史
			clickhistory(){
				uni.navigateTo({
					url:'/pages/other/life/payhistory/payhistory'
				})
			}
			
		}
	}
</script>

<style lang="scss">
.icon{
	float: right;
	margin-right: 20px;
}
.l2{
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
}
</style>
